<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Style Example</title>
</head>
<body>
    <p>You should see the background color change after clicking the button.</p>
    <input type="button" value="Add Style" onclick="addStyle()">

    <script type="text/javascript">
    
        function addStyle(){
            var style = document.createElement("style");
            style.type = "text/css";
            style.appendChild(document.createTextNode("body{background-color:red}"));  //error in IE
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(style);
        }

    </script>
</body>
</html>